<template>
	<view class="wuyepay">
		<!-- 顶部 -->
		<view class="head" style="margin: 10px 10px;">
			<view class="border-back">
				<view class="position-name" style="padding-bottom: 10px;margin-top: 10px;display: flex;">
					<image style="width: 25px;height: 25px;" src="http://clhy-img.oss-cn-beijing.aliyuncs.com/venusImage/2023-07-04/1688450026332.png" mode=""></image>
					<view style="margin-left: 10px;margin-top:1px">{{name}}{{address}}</view>
				</view>
				<!-- <view class="u-font-32 u-margin-bottom-22">{{name}}{{address}}</view> -->
				<view class="u-flex u-row-between u-m-t-12">
					<view class="u-font-26 u-margin-bottom-22"><span style="color: #999;">业主姓名：</span>{{homelist.ownerName}}</view>
					<view class="u-font-26 u-margin-bottom-22"><span style="color: #999;">建筑面积：</span>{{homelist.roomAreaOfStructure}}㎡</view>
					
				</view>
				<view class="u-flex u-row-between">
					<view class="u-font-26 u-margin-bottom-22">
						<!-- 单价：{{homelist.wuYePrice?homelist.wuYePrice+'/'+'平方米/'+(homelist.costsPeriodUnit==1?'年':homelist.costsPeriodUnit==2?'半年':homelist.costsPeriodUnit==3?'季度':'月'):'未设置'}} -->
						
						<span style="color: #999;">单价：</span><span style="color: #f29100;padding-right: 3px;">{{homelist.wuYePrice}}</span>/ 平方米 / {{(homelist.costsPeriodUnit==1?'年':homelist.costsPeriodUnit==2?'半年':homelist.costsPeriodUnit==3?'季度':'月')}}
					</view>
					<view class="u-font-26 u-margin-bottom-22"><span style="color: #999;">年物业费：</span>
					<span style="color: #f29100;font-size: 18px;padding-right: 3px;">{{Number(listdatas.normalWuYeMoney).toFixed(2)}}</span>元</view>
				</view>
				<!-- <view>物业附加费</view>
				<view class="box" v-if="payList.normalFuJiaMoney.length > 0">
					<view class="u-flex-1" v-for="(item,index) in payList.normalFuJiaMoney" :key='index'>
						{{item.costsSetChildName}}: ￥{{item.costsSetChildMoney}}
					</view>
				</view> -->
				<view class="btn" @click="show=true"
					v-if="payList.wuYeCost.lenght==0||(payList.wuYeCost.lenght>0&&payList.wuYeCost[0].costSign!=2)">
					预缴费用
				</view>
			</view>
			<!-- <view class="position-name" style="padding-bottom: 10px;">
				<i></i><span style="margin-left: 10px;">{{name}}{{address}}</span>
			</view>
			<view class="u-font-26 u-margin-bottom-22">房屋面积：{{homelist.roomAreaOfStructure}}㎡</view>
			<view class="u-font-26 u-margin-bottom-22">
				单价：{{homelist.wuYePrice?homelist.wuYePrice+'/'+'平方米/'+(homelist.costsPeriodUnit==1?'年':hourseStr.costsPeriodUnit==2?'半年':homelist.costsPeriodUnit==3?'季度':'月'):'未设置'}}
			</view>
			<view class="u-font-26 u-margin-bottom-22">年物业费：{{Number(listdatas.normalWuYeMoney).toFixed(2)}}元</view>
			<view>物业附加费</view>
			<view class="box">
				<view class="u-flex-1" v-for="(item,index) in listdatas.normalFuJiaMoney" :key='index'>
					{{item.costsSetChildName}}: ￥{{item.costsSetChildMoney}}
				</view>
			</view>
			<view class="btn" @click="show=true"
				v-if="payList.wuYeCost.lenght==0||(payList.wuYeCost.lenght>0&&payList.wuYeCost[0].costSign!=2)">
				预缴费用
			</view> -->
		</view>
		<!-- 主体内容 -->
		
		<view class="main" style="padding-bottom: 79px;" v-if="isShow">
			<view class="mian_content" v-for="(item,index) in listdatas.wuYeCost" :key='index' v-show="!item.freeOrder">
				<view class="u-flex">
					<i></i> <span style="color: #999;margin-left: 18rpx;">{{item.costName}}：</span>￥{{item.periodShouldMoney}}
				</view>
				<view style="float: right;margin-top: -20px;">
					<view class="daishenpi" v-if="item.costSign === 1">待缴</view>
					<view class="jujue" v-if="item.costSign === 2">欠费</view>
					<view class="youxiao" v-if="item.costSign === 3">预缴</view>
				</view>
				<view class="u-flex u-m-t-10" style="margin-left: 28rpx;">
					<span style="color: #999;">缴费周期：</span>
					<view>{{item.nextStartTime }}-{{item.nextEndTime }}</view>
				</view>
				<view class="u-flex u-row-between u-m-t-10">
					<view>
						<u-checkbox shape="circle" v-model="item.selectionStatus2" active-color="#427705c7"
							@change="handleAdditional(index)"><span style="color: red;">违约金：</span>
							￥{{item.weiYueMoney}}</u-checkbox>
					</view>
					<view>
						<span style="color: #999;">违约天数：</span>{{item.arrearageDay}} 天
					</view>
				</view>
				<view v-if="item.chargeList != null" style="background-color: #F4f4f4;width: 90%;margin: 9px auto;padding: 10px 10px;border-radius: 7px;">
					<view class="u-flex">
						<image style="width: 20px;height: 20px;" src="http://clhy-img.oss-cn-beijing.aliyuncs.com/venusImage/2023-07-04/1688462722804.png" mode=""></image>
						<view style="color: blue;font-size: 28rpx;margin-left: 18rpx;">物业附加费：</view>
					</view>
					<view style="padding-left: 48rpx" v-for="(item1,index1) in item.chargeList" class="u-m-l-10">
						<view class="u-flex u-m-t-10">
							<span style="color: #999;">{{item1.costsSetChildName}}：</span>
							<view>{{item1.costsSetMoney.toFixed(2)}} 元</view>
						</view>
				
					</view>
				</view>
				<view style="text-align: right;margin-top: 10px;">
					合计：<span style="color: orange;padding-right: 2px;font-size:40rpx">{{ Number(item.allMoney).toFixed(2) }}</span>元 </view>
			</view>
			<view style="margin:20px 20px;">
				
				<view class='guar-text' style="display:flex">
					备注：<input class="uni-input" v-model="costRemarks" 
					style="width: 271px;padding: 5px 11px;background-color: #fff;margin-top: -6px;"
					 placeholder="请输入您要备注的内容" />
				</view>
			</view>
		</view>

		<view class="foot" v-if="isShow">
			<view class="footer u-padding-left-30" >		
				<view class="" style="display: flex;justify-content:space-between" >
					<view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text class="txet">￥{{payTotal}}</text></view>
					<view class="button" @click="payBtn">立即缴费</view>
				</view>
			</view>
		</view>
		<!-- <view class="payment">
			<view class="redios" @click="clickChooseAll">
				<view v-if="chooseList.length != listdata.length || listdata.length == 0" class="redio"></view>
				<image v-else class="redio" :style="chooseList.length == listdata.length ? 'border: none;' : ''"
					src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/gou.png" mode=""></image>
				<view class="font-all" v-if="!chooseAll">全选</view>
				<view class="font-all" v-else>取消全选</view>
			</view>
			<view class="pay-all">
				<view>合计：</view>
				<view class="amount">￥{{tatleMoney}}</view>
				<view class="btn-pay" @click="payBtn">缴费</view>
			</view>
		</view> -->
		<!-- 弹出步进器 -->
		<u-popup v-model="show" mode="bottom" length="35%">
			<view class="bjq">
				<u-number-box v-model="num" :min="1" :input-width="100" :input-height="60"></u-number-box>
				<view class="u-flex u-row-between">
					<u-button size="medium" @click="cancel" :custom-style="customStyle">取消</u-button>
					<u-button type="warning" size="medium" @click="confirm" :custom-style="customStyle">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				show: false,
				allchecked: false, //全选
				name: '',
				address: '',
				customStyle: {
					margin: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象

				},
				homelist: {},
				listdatas: {},
				//物业费合计
				payTotal: 0,
				chooseList: [],
				list1: [],
				list2: [],
				tatleMoney: 0,
				chooseAll: false,
				listdata: [],
				isShow:false,
				timeHand:false,
				//保存总金额
				totalMon: null,
				//微信
				weChat:false,
				//支付宝
				alipay:false,
				activeRadio:0,
				costRemarks:null,
			}
		},
		// onShow() {
			// this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			// console.log(this.homelist, '--05')
			// this.name = this.homelist.proName;
			// this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist
			// 	.roomUnitNumber +
			// 	'-' + this.homelist.roomCode
		// 	this.getPayDetails()
		// },
		async onLoad(option) {		
			let storageObj = uni.getStorageSync('orderDetailList')
			console.log(storageObj == "",storageObj==null, storageObj,123);
			if (storageObj) {
				console.log('从app来源')
				let dataObj = JSON.parse(storageObj);
				this.statu = true
				//let data = dataObj;
				this.billList = dataObj.billList;
				this.data = dataObj //JSON.parse(dataObj);
				// return
			} else {
				console.log('来源于wx小程序本身')
				// this.statu = false
				this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
				console.log(this.homelist, '--05')
				this.name = this.homelist.proName;
				this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist
					.roomUnitNumber +
					'-' + this.homelist.roomCode
			}
			await this.getPayDetails()
		},
		methods: {
			//点击选择方式
			handleTime(){
				if(this.timeHand == false){
					this.timeHand = true
				}else{
					this.timeHand = false
				}
			},
			//点击微信支付
			handleWechat(num){
				if(num == 1){
					this.weChat = true
					this.alipay = false
				}else{
					this.alipay = true
					this.weChat = false
				}
			},
			//违约金
			handleAdditional(index){
				for(let i = index; i < this.listdatas.wuYeCost.length; i++){
					if(this.listdatas.wuYeCost[i].selectionStatus2 == true){
						this.listdatas.wuYeCost[i].allMoney = this.add(this.listdatas.wuYeCost[i].allMoney, Number(this.payList.wuYeCost[i].weiYueMoney))
						console.log(this.listdatas.wuYeCost[i].allMoney)
						this.payTotal = this.add(this.payTotal,Number(this.listdatas.wuYeCost[i].weiYueMoney))
					}else{
						this.listdatas.wuYeCost[i].allMoney = this.sub(this.listdatas.wuYeCost[i].allMoney, Number(this.payList.wuYeCost[i].weiYueMoney))
						console.log(this.listdatas.wuYeCost[i].allMoney)
						this.payTotal = this.sub(this.payTotal,Number(this.listdatas.wuYeCost[i].weiYueMoney))
						console.log(this.payTotal)
					}
					
				}
				
			},
			async getPayDetails() {
				let res = await this.$request.api.payDetails({
					proId: this.homelist.proId,
					// roomId: this.homelist.roomId,
					roomId:17706,
					setId: this.homelist.setId,
				}).then(res=>{
					
					// console.log(res.data.data.data)
					this.listdatas = res.data.data.data
					let tmp = []
					tmp = res.data.data.data.wuYeCost;
					
					for (let i = 0; i < tmp.length; i++) {
						tmp[i].choose = false;
						// tmp[i].allMoney = parseFloat(tmp[i].allMoney).toFixed(2)
					}
					this.listdata = tmp;
					
					let result = 0;
					for (let i = 0; i < this.listdatas.wuYeCost.length; i++) {
						if (this.listdatas.wuYeCost[i].costSign != 3) {
							result += Number(this.listdatas.wuYeCost[i].allMoney)
							this.payTotal = result.toFixed(2)
					
						}
					
					}
					this.isShow = true
					this.timeHand = true
					this.clear();
				})
				
			},
			clear() {
				this.chooseList = [];
				this.list1 = [];
				this.list2 = [];
			},
			// 预缴费用
			async confirm() {
				if (this.num > 5) {
					uni.showToast({
						icon: 'none',
						title: '每次只能预缴五期'
					})
					return
				}
				let res = await this.$request.api.prePay({
					proId: this.homelist.proId,
					roomId: this.homelist.roomId,
					setId: this.homelist.setId,
					num: this.num
				})
				console.log(res.data.data)
				this.show = false
				this.getPayDetails()
				if (res.data.data.status == 200) {

				} else {

					uni.showToast({
						icon: 'none',
						title: res.data.data.msg
					})
					return
				}
				this.num = 1;

				this.chooseAll = false
				this.tatleMoney = 0;
				this.chooseList = [];
				this.list1 = [];
				this.list2 = [];

			},
			// 全选时
			clickChooseAll() {
				let tmp = this.listdata
				this.tatleMoney = 0;
				this.list1 = [];
				this.list2 = [];
				if (this.chooseAll) {
					this.chooseAll = false;
					for (let i = 0; i < tmp.length; i++) {
						tmp[i].choose = false;
					}
				} else {
					this.chooseAll = true;
					for (let i = 0; i < tmp.length; i++) {
						tmp[i].choose = true;
						this.tatleMoney += Number(parseFloat(tmp[i].allMoney).toFixed(2));
						if (tmp[i].costSign == 3) {
							this.list2.push(tmp[i].id)
						} else {
							this.list1.push(tmp[i].id)
						}
					}
				}
				let aaa = [...this.list1, ...this.list2]
				this.chooseList = aaa;
				this.listdata = tmp;
			},

			clickInfo(item, index) {
				this.listdata[index].choose = !this.listdata[index].choose;
				// 控制全选
				let tmp = this.list1;
				// 存储选择预缴集合
				let state4 = this.list2;
				console.log(item.choose)
				// return
				if (item.choose) {
					// 根据预缴费判断
					if (item.costSign == 3) {
						let state4 = this.spliceState4True(index);
					} else {
						tmp.push(item.id)
					}
				} else {
					if (item.costSign == 3) {
						let state4 = this.spliceState4False(index);
					} else {
						for (let i = 0; i < tmp.length; i++) {
							if (tmp[i] == item.id) {
								tmp.splice(i, 1)
							}
						}
					}
				}
				// 数组合并
				let aaa = [...tmp, ...state4]

				if (aaa.length == this.listdata.length) {
					this.chooseAll = true
				} else {
					this.chooseAll = false
				}
				// 计算总数组的金额
				let sum = 0;
				for (let i = 0; i < aaa.length; i++) {
					for (let j = 0; j < this.listdata.length; j++) {
						if (aaa[i] == this.listdata[j].id) {
							sum += Number(this.listdata[j].allMoney)
						}
					}
				}

				// return
				this.tatleMoney = parseFloat(sum).toFixed(2);
				// return
				this.chooseList = aaa;
				// 计算金额
			},
			// 如果选中则删除预缴原来存在的数组元素
			spliceState4True(index) {
				let tmpAll = this.listdata;
				let state4 = this.list2;
				for (let i = 0; i < tmpAll.length; i++) {
					if (state4.includes(tmpAll[i].id)) {
						state4.splice(state4.indexOf(tmpAll[i].id), 1);
					}
				}
				// 添加在这index之前得所有id
				for (let i = 0; i <= index; i++) {
					if (this.listdata[i].costSign == 3) {
						state4.push(this.listdata[i].id)
						this.listdata[i].choose = true
					}
				}
				return state4;
			},
			// 如果不选中则删除预缴原来存在的数组元素及改变所有状态为false，在连着第一跳数据到选中的数据
			spliceState4False(index) {
				let tmpAll = this.listdata;
				let state4 = this.list2;
				for (let i = 0; i < tmpAll.length; i++) {
					if (state4.includes(tmpAll[i].id)) {
						state4.splice(state4.indexOf(tmpAll[i].id), 1);
					}
					if (tmpAll[i].costSign == 3) {
						tmpAll[i].choose = false
					}
				}
				this.listdata = tmpAll;

				for (let i = 0; i < index; i++) {
					if (this.listdata[i].costSign == 3) {
						state4.push(this.listdata[i].id)
						this.listdata[i].choose = true
					}
				}
				return state4;
			},
			async payBtn() {
				if (this.payTotal) {
					console.log(this.payTotal)

					let periodList = [];
					this.listdatas.wuYeCost.filter(item => {
						periodList.push(item)
					})
					// for (let i = 0; i < this.chooseList.length; i++) {
					// 	for (let j = 0; j < this.listdata.length; j++) {
					// 		if (this.chooseList[i] == this.listdata[j].id) {
					// 			periodList.push({
					// 				id: this.listdata[j].id,
					// 				wuYeMoney: this.listdata[j].wuYeMoney,
					// 				wuYeFuJiaMoney: this.listdata[j].wuYeFuJiaMoney,
					// 				weiYueMoney: this.listdata[j].weiYueMoney,
					// 			})
					// 		}
					// 	}
					// }
					let res = await this.$request.api.payOrder({
						allMoney: this.payTotal,
						roomId: this.homelist.roomId,
						phone: uni.getStorageSync('phone'),
						periodList: periodList,
						proId: this.homelist.proId,
						costRemarks:this.costRemarks
					}).then(res=>{
						this.idRes = res.data.data.data
						console.log(this.idRes, '缴费id')
						this.getBillDetail(this.idRes)
					})
				}

			},
			async getBillDetail(val) {
				let res = await this.$request.api.billDetails({
					setId: this.homelist.setId,
					id: val,
					mobile: uni.getStorageSync('phone')
				})
				this.billList = res.data.data.data
				console.log(this.billList)
				this.payClick()
					
			},
			
			
			async payClick() {
				console.log('+++++++++++++++++++++')
				let that = this;
				let openId = uni.getStorageSync('openId');
				console.log(openId)
				if(!openId){
					uni.showToast({
						icon: 'none',
						title: '请先登录'
					})
			
					return
				}
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						uni.setStorageSync('code', loginRes.code);
						that.$request.api.login({
							code: loginRes.code
						}).then(res => {
							 console.log(res,88888)
							uni.setStorageSync('openId', res.data.data.data.openId);
							uni.setStorageSync('sessionKey', res.data.data.data.sessionKey);
						});
					}
				})
				// console.log(uni.getStorageSync('openId'),33333)
				let res = await this.$request.api.getWxPay({
					id: this.idRes,
					mobile: this.data.mobile,
					open_id: uni.getStorageSync('phone'),
					proId: this.homelist.proId,
					pay_type: 'wx_lite', //（支付渠道）
					goods_title: '小程序物业收费', //（商品标题）
					goods_desc: '小程序物业收费', //（商品描述信息）
					allMoney: Number(this.payTotal).toFixed(2),
					code: this.billList.order.code
				})
				// console.log(res,66666)
				if (res.data.status != 200) {
					uni.showToast({
						icon: 'none',
						title: res.data.data.msg
					})
					return
				}else{
					uni.showToast({
						icon: 'error',
						title: res.data.data.msg
					})
				}
				let pay_info = JSON.parse(res.data.data.data.expend.pay_info)
			
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: pay_info.timeStamp,
					nonceStr: pay_info.nonceStr,
					package: pay_info.package,
					signType: pay_info.signType,
					paySign: pay_info.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						that.getBillDetail();
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							icon: 'none',
							title: '取消支付'
						})
					}
				});
			},
			
			
			
			// 取消
			cancel() {
				this.num = 1;
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 40rpx 20rpx;
		background: rgba(244, 244, 244, 1);
		border-radius: 6px;
		margin-top: 10rpx;

		view {
			display: inline-block;
			width: 50%;
			margin-bottom: 10rpx;
		}
	}

	.btn {
		text-align: center;
		width: 290rpx;
		height: 92rpx;
		border-radius: 50rpx;
		border: 1px solid rgba(249, 168, 50, 1);
		line-height: 92rpx;
		color: #F9A832;
		font-size: 32rpx;
		margin: 40rpx auto;
	}

	.head {
		border-top: 1px solid rgba(0, 0, 0, .1);
	}

	.main_top {
		height: 80rpx;
		background: rgba(244, 244, 244, 1);
	}

	.foot .footer {
		width: 100%;
		height: 136rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
	}
	.txet {
		color: #F9A832;
		font-size: 44rpx;
	}
	.button {
		text-align: center;
		background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
		color: #fff;
		padding: 7px 18px;
		border-radius: 8px;
		margin-right: 10px;
		margin-top: 15px;
	}

	.bjq {

		padding-top: 15%;
		padding-left: 60rpx;
		padding-right: 60rpx;

	}
</style>
<style lang="scss">
	page {
		background-color: #f4f4f4;
	}
	.list {
		height: 108rpx;
		display: flex;
		align-items: center;

		.redio {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			border: 2rpx solid #CCCCCC;
		}

		.list-detail {
			width: 85vw;
			display: flex;
			justify-content: space-between;



			.arrears {
				font-size: 28rpx;
				color: #FD3636;
			}

			.dates {
				font-size: 24rpx;
				color: #999999;
			}

			.tobepaid {
				font-size: 28rpx;
				color: #333333;
			}

			.pass {
				font-size: 28rpx;
				color: #F9A832;
			}

		}
	}

	.list:last-child {
		margin-bottom: 100rpx;
	}

	.payment {
		width: 100vw;
		padding: 14rpx 30rpx;
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);

		.redios {
			display: flex;
			align-items: center;

			.redio {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				border: 2rpx solid #CCCCCC;
			}

			.font-all {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.pay-all {
			align-items: center;
			display: flex;

			.amount {
				font-size: 28rpx;
				color: #FD3636;
				margin-right: 20rpx;
			}

			.btn-pay {
				width: 220rpx;
				height: 80rpx;
				background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
				border-radius: 44rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}
	}

	.bjq {
		.u-numberbox {
			display: flex !important;
			justify-content: space-between !important;
			width: 100% !important;
			border-top: 1px solid #DCDCDC;
			border-bottom: 1px solid #DCDCDC;
			padding: 40rpx 0;
		}
		.u-number-input {
			background-color: #fff !important;
		}
	}

	.position-name {
		font-size: 34rpx;
		font-weight: 550;
		color: #333333;
	}
	 i {
		width: 6px;
		height: 14px;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 4px;
		display: inline-block;
		vertical-align: middle;
	}

	.pay-count {
		font-size: 36rpx;
		font-weight: 600;
		color: #F9A832;
		align-items: center;
		margin-top: -37px;
		text-align: right;
		margin-top: -6px;
	}
	.border-back{
		background: rgb(255, 255, 255);
		width: 100%;
		margin: auto;
		border-radius: 10px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		padding: 20rpx 44rpx;
	}
	.mian_content{
		background: #fff;
		padding: 20rpx 30rpx;
		margin: 16rpx 22rpx;
	}
	.mian_content1{
		background: #fff;
		padding: 38rpx 36rpx;
		margin-top: 22px;
		border-radius: 16px;
		display: flex;
		justify-content: space-between;
	}
	.daishenpi {
		width: 106rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		border-radius: 6rpx;
		margin-left: 20rpx;
		font-size: 22rpx;
		border-radius: 12rpx 0;
	}
	.jujue {
		width: 106rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 6rpx;
		margin-left: 20rpx;
		font-size: 22rpx;
		border-radius: 12rpx 0;
	}
	.youxiao {
		width: 106rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 6rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
		font-size: 22rpx;
		border-radius: 12rpx 0;
	}
	.mainpayment{
		padding: 10px;
		position: fixed;
		bottom: 52px;
		width: 100%;
	}
	.guar-text textarea {
		height: 68px;
		background: #fff;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		border:1px solid #e5e5e5;
		border-radius: 8px;
	}
</style>